<template>
  <el-dialog :title="name" :visible.sync="dialogFormVisible" width="720px">
    <el-form
      ref="ruleForm"
      :model="form"
      size="small"
      style="width: 600px; margin-left: 30px"
      :label-width="formLabelWidth"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="菜单名称：" prop="menuName">
            <el-input v-model="form.menuName" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="菜单路由：" prop="menuRouteUrl">
            <el-input v-model="form.menuRouteUrl" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="菜单地址：" prop="menuUrl">
            <el-input v-model="form.menuUrl" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="图标地址：">
            <el-input v-model="form.icoClass" autocomplete="off" />
            <el-link
              href="https://element.eleme.cn/#/zh-CN/component/icon"
              type="primary"
              :underline="false"
              target="_blank"
              >图标icon</el-link
            >
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="控件类型：">
            <el-select v-model="form.ifBtn" placeholder="请选择">
              <el-option label="菜单" :value="0" />
              <el-option label="按钮" :value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="父级目录：">
            <el-select v-model="form.parentId" placeholder="请选择">
              <el-option label="root" :value="0" />
              <el-option
                v-for="item in menuList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否启用：">
            <el-select v-model="form.ifStop" placeholder="请选择">
              <el-option label="启用" :value="0" />
              <el-option label="禁用" :value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="优选级：">
            <el-input v-model="form.menuSort" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="权限参数：" prop="permissionCode">
            <el-input v-model="form.permissionCode" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addMenu } from "@/api/role";
export default {
  props: {
    isVisible: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    info: {
      type: Object,
      required: true
    },
    options: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      form: {
        icoClass: "",
        id: null,
        ifBtn: 0,
        ifStop: 0,
        menuName: "",
        menuRouteUrl: "",
        menuSort: 0,
        menuUrl: "",
        parentId: 0,
        permissionCode: 0
      },

      editForm: this.info,
      formLabelWidth: "100px",
      dialogFormVisible: false
    };
  },
  computed: {
    name() {
      return this.title;
    },
    menuList() {
      return this.options;
    }
  },
  watch: {
    info(newVal) {
      this.form = {
        icoClass: "",
        id: 0,
        ifBtn: 0,
        ifStop: 0,
        menuName: "",
        menuRouteUrl: "",
        menuSort: 0,
        menuUrl: "",
        parentId: 0,
        permissionCode: 0
      };
      if (newVal) {
        const info = JSON.parse(JSON.stringify(newVal));
        for (const i in this.form) {
          this.form[i] = info[i] ? info[i] : this.form[i];
        }
      }
    },
    dialogFormVisible(newVal) {
      if (!newVal) {
        this.$emit("close");
      }
    },
    isVisible(newVal) {
      this.dialogFormVisible = newVal;
    }
  },
  methods: {
    submitForm() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          addMenu(this.form).then(res => {
            this.dialogFormVisible = false;
            if (res.state === 100) {
              this.$emit("reflesh");
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss">
.el-col-24 .el-input {
  width: 500px;
}
.el-col-12 .el-input,
.el-col-12 .el-select {
  width: 200px;
}
</style>
